<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/evaluation/question.css">
<script src="/cn/js/jquery-1.12.2.min.js"></script>
<?php
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$count = array_keys(array_filter(array_column(array_column($list, 'parent'), 'listenFile')));
$start = $count[$page - 1];
$len = count($count) == $page ? count($list) - $page : $count[$page] - $count[$page - 1];
if (count($count) > 1) {
    $list = array_slice($list, $start, $len);
} ?>
<div class="head">
    <input id="startTime" value="" type="hidden">
    <input id="maxtime" value="<?php echo $totalTime ?>" type="hidden">
    <input type="hidden" value="<?php echo isset($_GET['subjectId']) ? $_GET['subjectId'] : 1 ?>" id="subjectId">
    <input type="hidden" value="<?php echo isset($_GET['pubId']) ? $_GET['pubId'] : 1 ?>" id="pubId">
    <input type="hidden" value="<?php echo $nextSubject != false ? $nextSubject : 0 ?>" id="nextSubjectId">
    <input type="hidden" value="<?php echo isset($_GET['page']) ? $_GET['page'] : 1 ?>" id="page">
    <input type="hidden" value="<?php echo $pageTotal = count($count) ?>" id="pageTotal">
    <input type="hidden" value="<?php echo $cateData['type'] ?>" id="type">

    <div class="container">
        <p class="headTitle">申友雅思-<?php echo $cateData['pidName'] ?>测评-<?php echo $cateData['name'] ?></p>
        <p class="timeStr"><img
                    src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/result/cuttime.png"><span></span></p>
        <p  class="quiteBtn" onclick="quite()"><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/result/quite.png">Quit</p>
    </div>
</div>
<div class="container main">


    <div class="section directions_box listen_direction"> <!--词汇题、翻译题、口语-->
        <div class="directions_text ">
            <?php echo $list[0]['parent']['name'] ?>
        </div>
        <div class="audio_box">
            <audio src="<?php echo $list[0]['parent']['listenFile'] ?>" id="listenAudio" ontimeupdate="updateProgress()"></audio>

            <img class="play" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/play.png"
                 onclick="playAudio(this)">
            <img class="pause" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/pause2.png"
                 style="display: none"
                 onclick="pauseAudio(this)">
            <div class="audio_right">
<!--                <input id="progress" class="autioPro" type="range"   onchange="aduioChange(this)" max="100">-->
                <p class="autioPro"><span ></span></p>
                <p class="audioTime"><span>00:00:00</span><span>00:00:00</span></p>
            </div>
            <audio src="<?php echo $list[0]['parent']['listenFile'] ?>"></audio>
        </div>

    </div>

    <div class="section question_box">
        <p class="section_title">Questions:</p>

        <div class="question_main" style="overflow-y: auto;margin-bottom: 10px">
            <!--        听力1-->
            <?php foreach ($list as $k => $v) {
                if ($v['parent']['questionType'] == 1) {//填空?>

                    <div class="hearing_question2">
                        <?php
                        static $str = '';
                        $count = substr_count($v['parent']['question'], '&amp;#');//可以判断是一段的填空还是一句话的填空
                        if ($count > 0) {
                            foreach ($v['son'] as $ke => $val) {
                                if ($ke == 0) $str = $v['parent']['question'];
                                $substr = '<input class="gap_filling" oninput="vocabulary(this,' . $val['id'] . ',&apos;' . $val['answer'] . '&apos;)">';
                                $str = preg_replace('/&amp;#/', $substr, $str, 1);
                            }
                            echo $str;
                        } else { ?>
                            <?php foreach ($v['son'] as $ke => $val) {
                                if ($ke == 0) echo '<p>' . $v['parent']['question'] . '</p>';
                                ?>
                                <p>
                                    <?php
                                    $substr = '<input class="gap_filling" oninput="vocabulary(this,' . $val['id'] . ',&apos;' . $val['answer'] . '&apos;)">';
                                    echo $val['article'] != false ? $val['name'] . '.' . str_replace('&#', $substr, $val['article']) : '';
                                    ?>
                                </p>
                            <?php }
                        } ?>
                    </div>
                <?php } elseif ($v['parent']['questionType'] == 2) {//单选
                    ?>
                    <p><?php echo $v['parent']['question'] ?></p>
                    <ul class="question_list">
                        <?php foreach ($v['son'] as $ke => $val) { ?>
                            <li class="question_item">
                                <div class="question_title"><span><?php echo $val['name'] ?>.</span>
                                    <div> <?php echo $val['article'] ?></div>
                                </div>
                                <ul class="question_options">
                                    <?php foreach ($val['option'] as $key => $value) { ?>
                                        <li class="question_option"
                                            onclick="chooseOption(this,<?php echo $val['id'] ?>,&apos;<?php echo chr(ord('A') + intval($key)) ?>&apos;,&apos;<?php echo $val['answer'] ?>&apos;)">
                                            <span><?php echo chr(ord('A') + intval($key)) ?></span><?php echo $key==0? substr($value,2):substr($value,3) ?>
                                        </li>
                                    <?php } ?>
                                </ul>
                            </li>
                        <?php } ?>
                    </ul>
                <?php } elseif ($v['parent']['questionType'] == 3) {//多选?>
                    <ul class="hearing_question3">
                        <li class="question_item">
                            <p class="question_title">
                                <?php echo $v['parent']['name'] ?>
                                . <?php echo $v['parent']['article'] . $v['parent']['question'] ?>
                            </p>
                            <ul class="question_options">
                                <?php foreach ($v['parent']['option'] as $key => $value) { ?>
                                    <li class="question_option"
                                        onclick="chooseOption2(this,<?php echo $v['son'][0]['id'] ?>,&apos;<?php echo chr(ord('A') + intval($key)) ?>&apos;,&apos;<?php echo $v['son'][0]['answer'] ?>&apos;)">
                                        <span><?php echo chr(ord('A') + intval($key)) ?></span><?php echo  substr($value,2) ?>
                                    </li>
                                <?php } ?>
                            </ul>
                        </li>
                    </ul>
                    <?php
                }
            } ?>
        </div>
        <p class="next_btn">
            <button class="" onclick="saveAnswer()">Next ></button>
        </p>
    </div>
</div>
<div class="next_modal question_modal" style="display: none">
    <div class="modal_dialog">
        <div class="modal-title">
            Response Required
            <img onclick="closeModal(this)" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/close.png">
        </div>
        <div class="modal-body">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/warning.png">

            <p>要先选择答案才能继续下一题哦</p>
        </div>
        <div class="modal-footer">
            <button class="nextBtn" onclick="closeModal(this)">OK</button>
        </div>
    </div>
</div>
<div class="next_modal  Quite_modal" style="display: none">
    <div class="modal_dialog">
        <div class="modal-title">
            Quite
            <img onclick="closeModal(this)" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/close.png">
        </div>
        <div class="modal-body">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/warning.png">

            <p>是否确定退出，退出将不保留测评记录</p>
        </div>
        <div class="modal-footer">
            <button class="noBtn" onclick="closeModal(this)">No</button>
            <button class="yesBtn" onclick="pageBack()">Yes</button>
        </div>
    </div>
</div>
<script src="/cn/js/evaluation/public.js"></script>

<script>
    var dirHei = $('.directions_box').height();
    console.log('dirHei', dirHei)
    var quesHei = "calc(100% - " + dirHei + "px - 60px)";
    var tableHei = "calc(100% -  110px)";
    $('.question_box').css({'height': quesHei});
    $('.question_main').css({'height': tableHei});
    var startTime = Math.ceil(new Date().getTime() / 1000); //单位秒
    $('#startTime').val(startTime);
    cutTime();
</script>
